<script setup>
import KOfooter from '@/components/KOfooter/KOfooter.vue';
import KOheader from '@/components/KOheader/KOheader.vue';
import KOselect from '@/components/KOselect/KOselect.vue';
import { useRouter } from 'vue-router'
const price=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/43333639-523d-44ec-b058-648beb87d651/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad119b6-4987-4137-bf49-3162f52cf6bd/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/36480a28-2da6-453d-bc1a-802ca5a0b035/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/23973800-0aa9-44c4-87f5-02bf7d07157c/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/e16b276c-9686-47ee-aef1-c9e0d5c813ae/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/569c8f8d-2244-4b8f-a27b-a022a56657f9/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/9f08ab8f-7d96-4277-bf86-cf167553023d/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/afd114cd-61c4-44c5-869c-30ba9c6c3830/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/d4c871e4-c0e9-47cf-88e4-412383ca4258/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/559bb54c-3c78-4b42-ab9f-d7c584cbd598/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/255dac4c-c3d7-4661-bf99-c8c665167e0d/w400h400t1.png",
    name:"裸光絲緞隔離霜2.0",
    old:"NT$ 1,380",
    new:"NT$ 1,280"
  },
]
const router = useRouter()
const toaction=(item)=>{
  router.push({
    path: '/ETCH',
    query: {
      url: item.url,
      name: item.name,
      oldjia:item.old,
      newjia:item.new
    }
  })
}
</script>

<template>
  <div class="ANAL">
    <KOheader/>
    <div style="display: flex;">
      <div style="width: 20%; margin-top: 40px; padding-left: 40px; line-height: 40px;">
        <div style="font-weight: 700;">主题</div>
        <div class="x" style="font-weight: 700;">週二免運日</div>
        <div class="x" style="font-weight: 700;">新品</div>
        <div class="x" style="font-weight: 700;">減價</div>
      </div>
      <div style="width: 80%;">
        <KOselect/>
        <div style="margin-top: 60px; display: flex; flex-wrap: wrap;">
          <div @click="toaction(item)" style="margin-right:20px ; margin-top: 10px;" v-for="item in price" :key="item">
            <img style="width: 250px; height: 250px;" :src=item.url alt="">
            <div>{{ item.name }}</div>
            <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.old }}</span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.new }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped lang="scss">
.ANAL {
  // background: linear-gradient( to right, #160d35, #2f0a49);
  background-color: #fff;
  width: 100%;
  height: calc(100vh);
}
.x:hover{
  text-decoration: underline;
}
</style>